<template>

    <div class="maindiv" ref="refdiv">

        <!--头部模块-->
        <div class="Touristportrait">

            <div class="weather">
                <div class="fanhuimain" @click="gohome"><img src="../../../assets/largescreen/y19.png" alt=""></div>
                <div class="weatherimg"><img :src="qihouimg" alt=""></div>
                <div class="weathertext">{{tianqi}} {{wendu}}℃</div>
            </div>
            <div class="Navigation">
                <div class="Navigationleft">
                    <div class="Navigationimg selectdada" @click="go1">游客画像</div>
                    <div class="Navigationimg" style="margin-left: 20px" @click="go3">酒店民宿</div>
                </div>
                <div class="Navigationmiddle">
                    <img src="../../../assets/largescreen/y18.png" alt="">
                    <!--数字海岛数据驾驶舱-->
                </div>
                <div class="Navigationright">
                    <div class="Navigationimgright" @click="go4">交通</div>
                    <div class="Navigationimgright" style="margin-left: 20px" @click="go2">景区</div>
                </div>
            </div>
            <div class="mydate">
                {{nowDate}} {{week}}
            </div>
        </div>
        <!--下方模块-->
        <div class="Touristbottomportrait">
            <!--左侧模块-->
            <div class="Leftsidemodule">
                <div class="modulediv">
                    <div class="moduledivtop">
                        累计客流人数
                    </div>
                    <div class="Passengerflow">
                        <el-radio-group v-model="Overviewparkselect" @input="Overvliewpark" style="margin-right: 10px">
                            <el-radio :label="1">年</el-radio>
                            <el-radio :label="2">季度</el-radio>
                            <el-radio :label="3">月</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="Piechart"  ref="Passengerflow">

                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtop">
                        游客特征分析
                    </div>
                    <div class="Featureanalysis">
                        <div class="Featureanalyimgsis1">
                            <div class="male1">男性</div>
                            <div class="male2">{{trait1}}%</div>
                        </div>
                        <div class="Featureanalyimgsis2">
                            <div class="male1">女性</div>
                            <div class="male2">{{trait2}}%</div>
                        </div>
                    </div>
                    <div class="malepic">
                        <div class="malepicdiv">
                            <div class="malepicdiv1" >
                                <div class="Featureanalysispics" ref="Featureanalysis1"></div>
                                <div class="bili">
                                   {{ Ratio3}}%
                                </div>
                            </div>
                            <div class="malepicdiv2">
                                未成年(0-17岁)
                            </div>
                        </div>
                        <div class="malepicdiv">
                            <div class="malepicdiv1">
                                <div class="Featureanalysispics" ref="Featureanalysis2"></div>
                                <div class="bili">
                                    {{ Ratio4}}%
                                </div>
                            </div>
                            <div class="malepicdiv2">
                                青年(18-45岁)
                            </div>
                        </div>
                        <div class="malepicdiv">
                            <div class="malepicdiv1">
                                <div class="Featureanalysispics" ref="Featureanalysis3"></div>
                                <div class="bili">
                                    {{ Ratio5}}%
                                </div>
                            </div>
                            <div class="malepicdiv2">
                                中年(45-59岁)
                            </div>
                        </div>
                        <div class="malepicdiv">
                            <div class="malepicdiv1">
                                <div class="Featureanalysispics" ref="Featureanalysis4"></div>
                                <div class="bili">
                                    {{ Ratio6}}%
                                </div>
                            </div>
                            <div class="malepicdiv2">
                                老年(60-99岁)
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtop">
                        游客年龄分析
                    </div>
                    <div class="mybar" ref="Visitorage">

                    </div>
                </div>
            </div>
            <!--中间模块-->
            <div class="Intermediatemodule">
                <div style="width: 100%;height: 6%"></div>
                <div class="mapdiv">
                    <div class="mapdiv_town"
                         :class="townIndex===index?'town_active':''"
                         :style="town.style"
                         v-for="(town,index) in townList"
                         :key="index"
                         @click="changeTown(town.id,index)"
                    >{{ town.name }}</div>
                </div>
                <div class="Statisticalanalysis" >
                    <div class="zhuxiantu"  ref="Statisticalanalysis">

                    </div>
                    <div class="moduledivtopkll">
                        客流统计分析
                    </div>
                </div>
            </div>
            <!--右侧模块-->
            <div class="Rightmodule">
                <div class="modulediv">
                    <div class="moduledivtop">
                        节假日客流量统计
                    </div>
                    <div class="Passengerflowtwo" ref="Holidaysfestivals">

                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtop">
                        省外客流（当月）
                    </div>
                    <div class="Passengerflowtwo" ref="Passengerflowtwo">

                    </div>
                </div>
                <div class="modulediv">
                    <div class="moduledivtop">
                        省内客流（当月）
                    </div>
                    <div class="tableDiv" ref="Passengerflowmanth">
                        <!--<dv-scroll-board :config="Personnedata"-->
                                         <!--style="width:100%;height:100%"/>-->
                        <!--<vue-seamless-scroll :data="hotelOrderList" :class-option="defaultOption" >-->
                            <!--<ul class="ul-scoll">-->
                                <!--<li v-for="(item,index) in hotelOrderList" :key="index" class="td_item">-->
                                    <!--<div class="tdi_left">-->
                                        <!--<div class="tdil_top" :style="{'background-image':'url('+require('../../../assets/largescreen/top' + (index<3?index+1:4) + '.png')+')'}">TOP.{{ index+1 }}</div>-->
                                        <!--&lt;!&ndash;<div class="tdil_name">{{ item.city }}</div>&ndash;&gt;-->
                                    <!--</div>-->
                                    <!--<div class="tdi_right">{{ item.cityName }}</div>-->
                                    <!--<div class="tdi_right">{{ item.personNum }}人</div>-->
                                    <!--<div class="tdi_right">{{ item.ratio }}%</div>-->
                                <!--</li>-->
                            <!--</ul>-->
                        <!--</vue-seamless-scroll>-->
                    </div>
                </div>
            </div>
        </div>
        <!--底部美化图-->
        <div class="Bottomlandscaping"></div>

    </div>

</template>


<script>

  import axios from 'axios'
 // import VueAwesomeProgress from 'vue-awesome-progress'
  import * as echarts from 'echarts'
  import { detectZoom } from '@/utils/detectZoom'

  import vueSeamlessScroll from 'vue-seamless-scroll'
  export default {
    name: '',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {


          jiejiari1:[],
          jiejiari2:[],
          shengwai1:[],
          shengwai2:[],
          shengnei1:[],
          shengnei2:[],
          shijian:[],
          renshu:[],
          Overviewparkselect: 1,
          tianqi: '',
          wendu: '',
          qihouimg: '',
          windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
          windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hotelOrderList:[],
        workday:{},
        holiday:{},
        holidayTotalNum:0,
        holidayTotalRatio:0,
        workdayTotalRatio:0,
        workdayTotalNum:0,
        totalPersonNum:0,
          renshuyear1:[],
          renshuyear2:[],
          renshujidu1:[],
          renshujidu2:[],
          renshuyue1:[],
          renshuyue2:[],

        analysislastyear:[],
        analysisThisyear:[],
        analysisyearonyearbasis:[],
        Passengerflowwaisheng:[],
        Ratio6:'',
        Ratio5:'',
        Ratio4:'',
        Ratio3:'',
        trait6:'',
        trait5:'',
        trait4:'',
        trait3:'',
        trait2:'',
        trait1:'',
        Touristageanalysis1:[],
        Touristageanalysis2:[],
        myislandId:[],
        nowtime: 0,
        timer: null,  // 定时器名称
        nowDate: '',
        week: '',
        currentTab: 'tab1', // 默认选中的tab
          townList:[
            {id:['4164678933'],name:'花鸟乡',style:{'left': '60.96%','top': '6.94%'}},
            {id:['1721484186251956225','1730426782508650497'],name:'洋山镇',style:{'left': '11.57%','top': '47.62%'}},
            {id:['5554544444'],name:'菜园镇',style:{'left': '35.48%','top': '45.04%'}},
            {id:['5554544444'],name:'五龙乡',style:{'left': '56.40%','top': '44.05%'}},
            {id:['1346784662'],name:'枸杞乡',style:{'left': '74.53%','top': '48.81%'}},
            {id:['4545454544'],name:'嵊山镇',style:{'left': '88.65%','top': '45.63%'}},
            {id:['5645645645'],name:'黄龙乡',style:{'left': '60.51%','top': '70.83%'}}
          ],
          townIndex:'',
          province:'',
          jinnian1:'',
          jinnian2:'',
      }
    },
    computed: {
      defaultOption () {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 1, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
        }
      }
    },
      watch: {
          windowHeight (val) {
              let that = this;
              console.log("实时屏幕高度：",val, that.windowHeight );
          },
          windowWidth (val) {
              let that = this;
              console.log("实时屏幕宽度：",val, that.windowHeight );
          }
      },

    created () {
this.getalldata();
      this.gettldata();
        this.getweather();
    },
    mounted () {
     const m = detectZoom()
     this.$refs.refdiv.style.zoom = 100 / Number(m)

// 获取今年的年份
        var currentYear = new Date().getFullYear();
        console.log("今年的年份为：" + currentYear);
        this.jinnian1=currentYear+'年';
// 获取去年的年份
        var lastYear = currentYear - 1;
        console.log("去年的年份为：" + lastYear);
        this.jinnian2=lastYear+'年';
      //启动定时器
      this.getTime();
      this.nowtime = setInterval(() => {
        this.getTime()
      }, 10000000)
      // *5分钟定时请求天气
      // this.timer = setInterval(() => {
      //   this.getweather();
      // }, 30000000)

     // this.getVisitoragedata()
     // this.getPassengerflowdata()

     // this.Passengerflowtwodata()

        var that = this;
        // <!--把window.onresize事件挂在到mounted函数上-->
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                window.fullWidth = document.documentElement.clientWidth;
                that.windowHeight = window.fullHeight;  // 高
                that.windowWidth = window.fullWidth; // 宽
            })()
        };
    },
    destroyed() {
      //清除定时器
      clearInterval(this.nowtime)
      clearInterval(this.timer);
      this.timer = null;
    },
    methods: {
        Overvliewpark(){
            this.shijian=[];
            this.renshu=[];
     if(this.Overviewparkselect==1){
         this.shijian=this.renshuyear1;
             this.renshu=this.renshuyear2;
         this.getPassengerflowdata();  //年度累计客流
     }else  if(this.Overviewparkselect==2){
         this.shijian=this.renshujidu1;
         this.renshu=this.renshujidu2;
         this.getPassengerflowdata();  //年度累计客流
     }else  if(this.Overviewparkselect==3){
         this.shijian=this.renshuyue1;
         this.renshu=this.renshuyue2;
         this.getPassengerflowdata();  //年度累计客流
     }
        },
        //切换岛屿
        changeTown(id,index){
            this.townIndex = index;
            if(!id) return
            this.myislandId = id;
            //图表初始化
           this.gettldata()
            this.getalldata()

        },
      gettldata(){
        this.$http
          .post("sys/visitorflow/selectVisitorStayData", {
              islandId: this.myislandId,
              province:this.province
          })
          .then((res) => {
            if (res.data.code == 0){
            //  console.log('111111111111111111',  res.data.data)
             this.workday=res.data.data.workday;
              this.holiday =res.data.data.holiday;
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },
      getalldata(){
        this.$http
          .post("sys/visitorflow/selectVisitorScreen", {
              islandId: this.myislandId,
              province:this.province
          })
          .then((res) => {
           //  console.log('111111111111111111',res)
            if (res.data.code == 0) {

                this.renshuyear1 = res.data.data.annualList.map(obj => obj.monthMod);// 游客人数-年
                this.renshuyear2 = res.data.data.annualList.map(obj => obj.personNum);// 游客人数-年-人数
                this.renshujidu1 = res.data.data.quarterList.map(obj => obj.monthMod);// 游客人数-年
                this.renshujidu2 = res.data.data.quarterList.map(obj => obj.personNum);// 游客人数-年-人数
                this.renshuyue1 = res.data.data.monthList.map(obj => obj.monthMod);// 游客人数-年
                this.renshuyue2 = res.data.data.monthList.map(obj => obj.personNum);// 游客人数-年-人数
                this.shijian= this.renshuyear1;
                    this.renshu=this.renshuyear2;

                this.getPassengerflowdata();  //年度累计客流


              this.Touristageanalysis1 = res.data.data.ageDistList.map(obj => obj.ageDistKey);// 游客年龄分析-年级
              this.Touristageanalysis2 = res.data.data.ageDistList.map(obj => obj.personNum);// 游客年龄分析-人数
              this.getVisitoragedata()
this.trait1=res.data.data.alldayFeature.boyRatio;  //游客特征分析
              this.trait2=res.data.data.alldayFeature.girlRatio;
              this.trait3=res.data.data.alldayFeature.childNum;
this.Ratio3=res.data.data.alldayFeature.childRatio;
              this.trait4=res.data.data.alldayFeature.youngNum;
              this.Ratio4=res.data.data.alldayFeature.youngRatio;
              this.trait5=res.data.data.alldayFeature.midNum;
              this.Ratio5=res.data.data.alldayFeature.midRatio;
              this.trait6=res.data.data.alldayFeature.oldNum;  //游客特征分析
              this.Ratio6=res.data.data.alldayFeature.oldRatio;
              this.totalNum=res.data.data.alldayFeature.totalNum;

              this.getFeatureanalysis1()
              this.getFeatureanalysis2()
              this.getFeatureanalysis3()
              this.getFeatureanalysis4()

              this.Passengerflowwaisheng=res.data.data.outProList.map((item,index,arr)=>{
                let json={};
                json.value=item.personNum;
                json.name=item.provinceName;
                json.province=item.province;
                return json
              })

                this.shengwai1 = res.data.data.outProList.map(obj => obj.provinceName);
                this.shengwai2 = res.data.data.outProList.map(obj => obj.personNum);

this.Passengerflowtwodata(); // 省外客流（当月）

                this.shengnei1 = res.data.data.inProList.map(obj => obj.cityName);
                this.shengnei2 = res.data.data.inProList.map(obj => obj.personNum);

              this.analysislastyear=res.data.data.lastAnnualArr;  //客流统计分析-去年
              this.analysisThisyear=res.data.data.currAnnualArr;    //客流统计分析-今年
              this.analysisyearonyearbasis=res.data.data.annualRatioArr;    //客流统计分析-同比
this.Statisticalanalysisdata();

//节假日客流量统计

                this.jiejiari1 = res.data.data.holidayList.map(obj => obj.monthMod);
                this.jiejiari2 = res.data.data.holidayList.map(obj => obj.personNum);
this.Holidaysfestivals();

this.totalPersonNum=res.data.data.totalPersonNum;
              this.holidayTotalNum=res.data.data.holidayTotalNum;
              this.holidayTotalRatio=res.data.data.holidayTotalRatio;
              this.workdayTotalRatio=res.data.data.workdayTotalRatio;
              this.workdayTotalNum=res.data.data.workdayTotalNum;



this.Passengerflowmanth();
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },

        gohome(){
            this.$router.replace({ path: '/home' })
        },
      getweather(){
           let that=this;
              //加载天气查询插件
              AMap.plugin('AMap.Weather', function() {
                  //创建天气查询实例
                  let weather = new AMap.Weather();
                  //执行实时天气信息查询
                  weather.getLive('嵊泗县', function(err, data) {
                      if (data.info == 'OK') {
                       //   console.log('111111111111111111',data.weather,data.temperature)
                          that.tianqi = data.weather;
                          that.wendu = data.temperature;

                          if (data.weather.indexOf("晴") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/8fff92353a984b2c923429c782e0f0ac.png';
                          } else if (data.weather.indexOf("暴雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/b4a84f8e5a7d41d49d69d6a6fcbcac9c.png';
                          } else if (data.weather.indexOf("暴雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/c3430daaf25c4315abcc046815f7dca2.png';
                          } else if (data.weather.indexOf("冰雹") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/1f7497a9725740e48e6ef06725680c9f.png';
                          } else if (data.weather.indexOf("大雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/8fbbaaf4564b4a5e9f10785bd83cb346.png';
                          } else if (data.weather.indexOf("大雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/b731ec5b2a974c1fbfdb2efcc18b9091.png';
                          } else if (data.weather.indexOf("多云") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/5c263447dab4446a980f086636b6cf34.png';
                          } else if (data.weather.indexOf("雷阵雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/7d65235177fa4156859fcbef8c057705.png';
                          } else if (data.weather.indexOf("雾") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/1d4ecb857a7e4ba9a00a8c210580955c.png';
                          } else if (data.weather.indexOf("小到中雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/0f3ba3c4eb1c4fd7950644473a5321e3.png';
                          } else if (data.weather.indexOf("小雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/3c9ccc8c449649c99c0f12b42bf5110d.png';
                          } else if (data.weather.indexOf("雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/4cbe88253ffb4f5899ef523c1c4d0b22.png';
                          } else if (data.weather.indexOf("阴") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/5e8e64175e034bdf8303da3acb174b19.png';
                          } else if (data.weather.indexOf("雨夹雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/10912cdd39114a9b96a794756a9cdb86.png';
                          } else if (data.weather.indexOf("阵雨@") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/607c0514d2364c2e8363c4886523fb0e.png';
                          } else if (data.weather.indexOf("中到大雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/2f2c4e797f884894a9bf3ab9b46663fe.png';
                          } else if (data.weather.indexOf("中雪") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/7166ea1b330845bcb146e87cfd532a9b.png';
                          } else if (data.weather.indexOf("中雨") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231220/a4e0a114e87a40dd8cffec07ba5ea83f.png';
                          }else if (data.weather.indexOf("霾") != -1) {
                              that.qihouimg =
                                  'https://i.ringzle.com/file/20231229/1f68b36db41748d3bf208cb86ce482cf.png';
                          }

                      }
                  });
              });
      },
      getFeatureanalysis4(){
        let myChart = echarts.init(this.$refs.Featureanalysis4)
        let  option = {
          series: [{
            name: '进度',
            type: 'pie',
            radius: ['70%', '85%'],
            //	radius: [159, 169],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            startAngle: 90,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value:this.trait6,
              itemStyle: {
                normal: {
                  borderWidth: 45,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#B111FF' // 0% 处的颜色
                    },  {
                      offset: 1,
                      color: '#CE5BF2' // 100% 处的颜色
                    }],
                  }
                }
              }
            }, {
              value:this.totalNum,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#B111FF' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#CE5BF2' // 100% 处的颜色
                    }],
                  },
                  opacity: 0.3
                }
              }
            } ]
          }]
        };
        myChart.setOption(option)
      },
      getFeatureanalysis3(){
        let myChart = echarts.init(this.$refs.Featureanalysis3)
        let  option = {
          series: [{
            name: '进度',
            type: 'pie',
            radius: ['70%', '85%'],
            //	radius: [159, 169],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            startAngle: 90,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value:this.trait5,
              itemStyle: {
                normal: {
                  borderWidth: 45,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#CF346B' // 0% 处的颜色
                    },  {
                      offset: 1,
                      color: '#F678A2' // 100% 处的颜色
                    }],
                  }
                }
              }
            }, {
              value:this.totalNum,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#CF346B' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#F678A2' // 100% 处的颜色
                    }],
                  },
                  opacity: 0.3
                }
              }
            } ]
          }]
        };
        myChart.setOption(option)
      },
      getFeatureanalysis2(){
        let myChart = echarts.init(this.$refs.Featureanalysis2)
        let  option = {
          series: [{
            name: '进度',
            type: 'pie',
            radius: ['70%', '85%'],
            //	radius: [159, 169],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            startAngle: 90,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value:this.trait4,
              itemStyle: {
                normal: {
                  borderWidth: 45,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#006BFE' // 0% 处的颜色
                    },  {
                      offset: 1,
                      color: '#34ABFF' // 100% 处的颜色
                    }],
                  }
                }
              }
            }, {
              value:this.totalNum,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#006BFE' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#34ABFF' // 100% 处的颜色
                    }],
                  },
                  opacity: 0.3
                }
              }
            } ]
          }]
        };
        myChart.setOption(option)
      },
      getFeatureanalysis1(){
        let myChart = echarts.init(this.$refs.Featureanalysis1)
      let  option = {
          series: [{
            name: '进度',
            type: 'pie',
            radius: ['70%', '85%'],
            //	radius: [159, 169],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            startAngle: 90,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [{
              value:this.trait3,
              itemStyle: {
                normal: {
                  borderWidth: 45,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#00FF95' // 0% 处的颜色
                    },  {
                      offset: 1,
                      color: '#5AFFE0' // 100% 处的颜色
                    }],
                  }
                }
              }
            }, {
              value:this.totalNum,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: '#05FF99' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#0CFFC9' // 100% 处的颜色
                    }],
                  },
                  opacity: 0.3
                }
              }
            } ]
          }]
        };
        myChart.setOption(option)
      },
        Passengerflowmanth(){
            let myChart = echarts.init(this.$refs.Passengerflowmanth)
            const myColor = ["#01FFFF", "#4C5FF5", "#FFE660", "#79F1FF"].reverse();
            var attackSourcesColor1 = myColor;
            let option = {
                backgroundColor:"#051C43",
                tooltip: {
                    trigger: "axis",
                  //  formatter: "宣传教育<br> {b}：     {c}户",
                    backgroundColor: 'rgba(18, 57, 60, .8)', //设置背景颜色
                    textStyle: {
                        color: '#fff'
                    },
                    borderColor: "rgba(18, 57, 60, .8)",
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(0, 11, 34, .2)',
                        }
                    },
                },
                grid: {
                    x: 65,
                    y: 40,
                    x2: 20,
                    y2: 20,
                    left:'15%',
                    right:'10%',
                    top: '2%',
                    bottom: '12%'
                },
                xAxis: {
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#284685",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#C6D7F1",
                            fontSize: 12
                        },
                    },
                    show: true,
                    type: "value",
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(40, 70, 133, .3)',
                            type: 'solid'
                        }
                    },
                },
                yAxis: [{
                    type: "category",
                    data: this.shengnei1,
                    axisLine: {
                        lineStyle: {
                            color: "#284685",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#DEEBFF",
                            fontSize: 12
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                    {
                        show: true,
                        data: this.shengnei2,
                     //   offset: -35,
                        position: "right",
                        axisLabel: {
                          //  lineHeight: 24,
                           // verticalAlign: "bottom",
                            fontSize: 12,
                            color: "#fff",
                            formatter: "{value}",
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                    },],
                series: [
                    {
                        name: "",
                        type: "bar",
                        barWidth: 12,
                        data: this.shengnei2,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [0, 20, 20, 0],
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: 'rgba(1, 255, 255, 1)' // 0% 处的颜色
                                },
                                    {
                                        offset: 1,
                                        color: 'rgba(2, 127, 255, 1)' // 100% 处的颜色
                                    }
                                ]),
                                // shadowColor: 'rgba(0,160,221,1)',
                                // shadowBlur: 1,
                            }
                        },
                    },
                    {
                        name: "",
                        type: "bar",
                        barWidth: 12,
                        barGap: "-100%",
                        z: 0,
                        itemStyle: {
                            barBorderRadius: [0, 20, 20, 0],
                            color: "#C6D7F1",
                        },
                        data: this.shengnei2,
                    },
                ],
            };
            myChart.setOption(option)
        },

        Holidaysfestivals(){
      let myChart = echarts.init(this.$refs.Holidaysfestivals)
        let    option = {
                tooltip: {
                    show: false,
                    confine: true,
                },
                legend: {
                    data: [],
                    show: false
                },
                grid: {
                    left: '16%',
                    right: '16%',
                    bottom: '3%',
                    top: '3%',
                },
                xAxis: {
                    show: false,
                    type: 'value',
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.15)',
                        },
                    },
                    splitArea: {
                        show: false,
                    },
                },
                yAxis: [
                    {
                        type: 'category',
                        inverse: true,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                        offset: 10,
                        data:  this.jiejiari1,
                        axisLabel: {
                            formatter(value) {
                                return value.length > 6 ? `${value.substring(0, 5)}...` : value
                            },
                            fontSize: 12,
                            color: '#C6D7F1',
                            align: 'right',
                        },
                    },
                ],
                series: [
                    {
                        z: 2,
                        type: 'bar',
                        zlevel: 1,
                        label: {
                            show: true,
                            position: 'right',
                            color: '#C6D7F1',
                            fontFamily: 'Bebas',
                            offset: [10, 2],
                            formatter(params) {
                                const num = params.value
                                return '{a|' + num + '人}'
                            },
                            rich: {
                                a: {
                                    color: '#C6D7F1',
                                    padding: [0, 12, 0, 0],
                                },
                            },
                        },
                        barWidth: 10,
                        name: '客流量',
                        data:  this.jiejiari2,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 0,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(105,193,255,0)', //  0%  处的颜色quanmei
                                        },
                                        {
                                            offset: 0.8,
                                            color: 'rgba(105,193,255,0.7)', //  100%  处的颜色quanmei
                                        },
                                        {
                                            offset: 1,
                                            color: '#00BEFF', //  100%  处的颜色quanmei
                                        },
                                    ],
                                    global: false, //  缺省为  false quanmei
                                },
                            },
                        },
                    },
                ],
            };

            myChart.setOption(option)
  },
      Statisticalanalysisdata(){
        let myChart = echarts.init(this.$refs.Statisticalanalysis)
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#fff'
              }
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            top: '30%',
            bottom: '1%',
            containLabel: true,
          },

          legend: {
            data: [this.jinnian2, this.jinnian1, '同比'],
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            right: '0',
          },
          xAxis: [
            {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisPointer: {
                type: 'shadow'
              },
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: '#035192'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 12,
                color: '#C6D7F1'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位:万人',
              min: 0,
              max: 250,
              interval: 50,
              nameTextStyle: {
                color: '#C6D7F1',
                fontWeight: 400,
                fontSize: 12
              },
              axisLine: {
                show: false,
                lineStyle: {
                  width: 1,
                  color: '#545454'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 12,
                color: '#C6D7F1',
              //  formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: '同比:%',
              // min: 0,
              // max: 25,
              // interval: 5,
              nameTextStyle: {
                color: '#C6D7F1',
                fontWeight: 400,
                fontSize: 12
              },
              axisLine: {
                show: false,
                lineStyle: {
                  width: 1,
                  color: '#545454'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                fontSize: 12,
                color: '#C6D7F1',
              //  formatter: '{value} ml'
              }
            }
          ],
          series: [
            {
              name:this.jinnian2,
              type: 'bar',
              barWidth: 8, // 设置柱子粗细
              barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
            //  barCategoryGap: '30%', //同一系列的柱间距离，默认为类目间距的20%，可设固定值

              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: '#34ABFF'},
                      {offset: 1, color: '#006BFE'}
                    ]
                  )
                }
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value ;
                }
              },
              data: this.analysislastyear
            },
            {
              name: this.jinnian1,
              type: 'bar',
              barWidth: 8, // 设置柱子粗细
              barGap: '70%', //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [
                      {offset: 0, color: '#89FCCC'},
                      {offset: 1, color: '#00FF95'}
                    ]
                  )
                }
              },
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                }
              },
              data: this.analysisThisyear
            },
            {
              name: '同比',
              type: 'line',
              yAxisIndex: 1,
              // lineStyle: {
              //   width: 2,
              //   color: "#CF346B",
              // },
              lineStyle: { // 线条样式
                normal: {
                  width: 2,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                    {
                      offset: 0,
                      color: '#F678A2'
                    },
                    {
                      offset: 1,
                      color: '#CF346B'
                    }
                  ])
                }
              },
              smooth: true,
            showSymbol: false,
              tooltip: {
                valueFormatter: function (value) {
                  return value + '%';
                }
              },
              data: this.analysisyearonyearbasis
            }
          ]
        };
        myChart.setOption(option)
      },
      Passengerflowtwodata () {
        let myChart = echarts.init(this.$refs.Passengerflowtwo)
       let   option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      type: 'shadow'
                  }
              },
              grid: {
                  left: '10%',   // 距离容器左边的距离
                  right: '10%',  // 距离容器右边的距离
                  top: '5%',    // 距离容器顶部的距离
                  bottom: '0%', // 距离容器底部的距离
                  containLabel: true, // 包含坐标轴标签在内的所有内容
              },
           yAxis: {
                  type: 'category',
                  data: this.shengwai1,
                  axisLabel: {
                      interval: 0, // 设置为 0，表示强制显示所有标签
                      rotate: 0, // 设置标签倾斜角度，负数表示逆时针旋转
                      color: "#C6D7F1"//单位值的颜色
                  },
                  axisLine: {show:false},
                  axisTick: {show:false}
              },
           xAxis: {
                  type: 'value',
                  axisLabel: {
                      show:false,
                      color: '#C6D7F1',
                      fontSize: 12
                  },
                  axisLine: {show:false},
                  axisTick: {show:false},
                  splitLine: {show:false}
              },
              series: [
                  {
                      type: 'bar',
                      barWidth: 10,
                      label: {
                          show: true,
                          position: 'right',
                          formatter: '{c}',
                          textStyle: {
                              color: '#C6D7F1',
                              fontSize: 10
                          }
                      },
                      itemStyle: {
                          color: {
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [{
                                  offset: 0,
                                  color: '#165DFF'
                              },
                                  {
                                      offset: 1,
                                      color: 'rgba(22, 93, 255, 0)'
                                  }],

                          }
                      },
                      data: this.shengwai2,
                  },

              ]

          };


        myChart.setOption(option)
        myChart.on('click',(params)=>{
            this.province = params.data.province;
            this.gettldata();
            this.getalldata();
        })
      },
      getPassengerflowdata () {
        let myChart = echarts.init(this.$refs.Passengerflow);
        let  option = {
            grid:{ // 让图表占满容器
                top:"22%",
                left:"10%",
                right:"3%",
                bottom:"16%"
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: '#fff', // 悬浮框背景色
                borderColor: '#000', // 悬浮框边框颜色
                borderWidth: 1, // 悬浮框边框宽度
                textStyle: { // 悬浮框文字样式
                    color: '#000',
                    fontSize: 12
                }
            },
            xAxis: {
                  type: 'category',
                  data: this.shijian,
                axisLabel: {
                    fontSize: 12,
                    color: '#C6D7F1'
                }
              },
              yAxis: {
                  name: '单位：万人',
                  nameTextStyle: {
                      color: '#C6D7F1',
                      fontWeight: 400,
                      fontSize: 12
                  },
                  type: 'value',
                  axisLabel: {
                      fontSize: 12,
                      color: '#C6D7F1'
                  }
              },
              series: [
                  {
                      data: this.renshu,
                      type: 'line',
                      itemStyle: {
                          normal: {
                              label: {
                                  show: false // 在折线拐点上显示数据
                              },
                              lineStyle: {
                                  width: 3,  // 设置虚线宽度
                                  type: 'solid'  // 虚线'dotted' 实线'solid'
                              },
                              color: '#C2DFFF',
                          },
                      },

                      lineStyle: { // 设置线条的style等
                          normal: {
                              color: '#C2DFFF', // 折线线条颜色:红色
                          },
                      },
                      areaStyle: {
                          color: {
                              type: 'linear',
                              x: 0,
                              y: 0,
                              x2: 0,
                              y2: 1,
                              colorStops: [  // 渐变颜色
                                  {
                                      offset: 0,
                                      color: 'rgba(85,111,253,0.50)',
                                  },
                                  {
                                      offset: 1,
                                      color: 'rgba(85,111,253,0.00)',
                                  },
                              ],
                              global: false,
                          },
                      },

                  }
              ]
          };
        myChart.setOption(option);
      },
      getVisitoragedata () {
        let myChart = echarts.init(this.$refs.Visitorage)

     //   let xaxisData = ['20以下', '20-30岁', '30-40岁', '40-50岁', '50岁以上']
      //  let yaxisData = [50, 100, 200, 150, 240]

        const offsetX = 10
        const offsetY = 5
// 绘制左侧面
        const CubeLeft = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            // 会canvas的应该都能看得懂，shape是从custom传入的
            const xAxisPoint = shape.xAxisPoint
            const c0 = [shape.x, shape.y]
            const c1 = [shape.x - offsetX, shape.y - offsetY]
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
            const c3 = [xAxisPoint[0], xAxisPoint[1]]
            ctx
              .moveTo(c0[0], c0[1])
              .lineTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .closePath()
          },
        })

// 绘制右侧面
        const CubeRight = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint
            const c1 = [shape.x, shape.y]
            const c2 = [xAxisPoint[0], xAxisPoint[1]]
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
            const c4 = [shape.x + offsetX, shape.y - offsetY]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          },
        })

// 绘制顶面
        const CubeTop = echarts.graphic.extendShape({
          shape: {
            x: 0,
            y: 0,
          },
          buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y]
            const c2 = [shape.x + offsetX, shape.y - offsetY] //右点
            const c3 = [shape.x, shape.y - offsetX]
            const c4 = [shape.x - offsetX, shape.y - offsetY]
            ctx
              .moveTo(c1[0], c1[1])
              .lineTo(c2[0], c2[1])
              .lineTo(c3[0], c3[1])
              .lineTo(c4[0], c4[1])
              .closePath()
          },
        })

// 注册三个面图形
        echarts.graphic.registerShape('CubeLeft', CubeLeft)
        echarts.graphic.registerShape('CubeRight', CubeRight)
        echarts.graphic.registerShape('CubeTop', CubeTop)

        let option = {
          //  backgroundColor: 'black',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            //  backgroundColor: "rgba(255,255,255,0.75)",
            extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
            textStyle: {
              fontSize: 12,
              color: '#fff',
            },
            formatter: (params, ticket, callback) => {
              const item = params[1]
              return item.name + ' : ' + item.value + '万人'
            },
          },
          grid: {
            left: '7%',
            right: '0%',
            top: '16%',
            bottom: '1%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            data: this.Touristageanalysis1,
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#035192'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: '#C6D7F1'
            }
          },
          yAxis: {
            type: 'value',
            name: '单位：万人',
            nameTextStyle: {
              color: '#C6D7F1',
              fontWeight: 400,
              fontSize: 12
            },
            axisLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: '#545454'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 12,
              color: '#C6D7F1'
            }
          },
          series: [
            {
              type: 'custom',
              renderItem: (params, api) => {
                const location = api.coord([api.value(0), api.value(1)])
                return {
                  type: 'group',
                  children: [
                    {
                      type: 'CubeLeft',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#00BFF4',
                          },
                          {
                            offset: 0.35,
                            color: '#0064B5'
                          },
                          {
                            offset: 1,
                            color: 'transparent'
                          }
                        ]),
                      },
                    },
                    {
                      type: 'CubeRight',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                          {
                            offset: 0,
                            color: '#0064B5',
                          },
                          {
                            offset: 0.35,
                            color: '#00BFF4'
                          },
                          {
                            offset: 1,
                            color: 'transparent'
                          }
                        ]),
                      },
                    },
                    {
                      type: 'CubeTop',
                      shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                      },
                      style: {
                        fill: '#00BFF4'
                      },
                    },
                  ],
                }
              },
              data:  this.Touristageanalysis2,
            },
            {
              type: 'bar',
              itemStyle: {
                color: 'transparent',
              },
              data:  this.Touristageanalysis2,
            },
          ],
        }
        myChart.setOption(option)
      },
      dateFormat (date, format) {
        format = format || 'yyyy-MM-dd hh:mm:ss'
        if (date !== 'Invalid Date') {
          let o = {
            'M+': date.getMonth() + 1, //month
            'd+': date.getDate(), //day
            'h+': date.getHours(), //hour
            'm+': date.getMinutes(), //minute
            's+': date.getSeconds(), //second
            'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
            S: date.getMilliseconds(), //millisecond
          }
          if (/(y+)/.test(format)) {
            format = format.replace(
              RegExp.$1,
              (date.getFullYear() + '').substr(4 - RegExp.$1.length)
            )
          }
          for (let k in o) {
            if (new RegExp('(' + k + ')').test(format)) {
              format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
              )
            }
          }
          return format
        }
        return ''
      },
      //获取实时日期
      //获取实时日期
      getTime () {
        const dataTime = new Date()
        this.nowDate = this.dateFormat(dataTime, 'yyyy年MM月dd')
        let w = ['日', '一', '二', '三', '四', '五', '六']
        let xinqi = dataTime.getDay()
        this.week = '星期' + w[xinqi] //星
      },
      back () {
        this.$router.replace({ path: '/home' })
      },
      go1 () {
        this.$router.push({ path: '/cockpit-cockpitjd1' })
      },
      go2 () {
        this.$router.push({ path: '/cockpit-cockpitjj1'})
      },
      go3 () {
        this.$router.push({ path: '/cockpit-cockpityk1' })
      },
      go4 () {
        this.$router.push({ path: '/cockpit-cockpitjt1' })
      },
    },
    watch: {},

  }
</script>

<style lang="scss" scoped>





.Lengthactive{
    .Lengthofgzstay1,.Lengthofgzstay2{
        color: #C6D7F1;
    }
}
    .triduum4 img{
        height: 40px;
        width: 40px;
    }
.triduum4{
    height: 40px;
    width: 40px;
}
    .triduum5{
        width: 50px;
        height: 48px;
        text-align:left;
        font-size: 12px;
        font-family: DINAlternate, DINAlternate;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 48px;
    }
    .triduum3{
        width: 60px;
        height: 48px;
        text-align: right;
        font-size: 12px;
        font-family: DINAlternate, DINAlternate;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 48px;
    }
    .triduum2{
        height: 48px;
        font-size: 12px;
        font-family: DINAlternate, DINAlternate;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 48px;
        padding: 0 5px;
    }
.triduum1{
    height: 48px;
    font-size: 16px;
    font-family: DINAlternate, DINAlternate;
    font-weight: bold;
    color: #C6D7F1;
    line-height: 48px;
}
  .holipenday1{
         width: 100%;
         height: 48px;
         background: url("../../../assets/largescreen/y15.png");
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center center;
         display: flex;
         align-items: center;
         justify-content: flex-end;
     }
    .holipenday2{
        width: 100%;
        height: 48px;
        background: url("../../../assets/largescreen/y16.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
.holiday1{
width: calc(50% - 70px);
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
    .holiday2 img{
        width:140px;
        height: 140px;
    }
.holiday2{
    width:140px;
    height: 140px;
}
.holiday{
    width: 100%;
    height: 140px;
   display: flex;
}
    .beijing img{
        width:88px;
        height: 4px;
    }
.beijing{
    width:88px;
    height: 4px;
    position: absolute;
    top: 34px;
    left: 0px;
}
.xiantiao{
    width: 90%;
    height: 1px;
    border-top: 1px solid #065691;
    position: absolute;
    top: 44px;
    left: 20px;
}
    .Lengthofgzstay2{
        width:88px;
        height: 35px;
        text-align: center;
        font-size: 16px;
        font-family: AppleSystemUIFont;
        color:#065691;
        line-height: 20px;
    }
.Lengthofgzstay1{
    width:88px;
    height: 35px;
    text-align: center;
    font-size: 16px;
    font-family: AppleSystemUIFont;
    color: #065691;
    line-height: 48px;
}
.Lengthofstay1{
    width:88px;
    height: 70px;
    position: relative;
    cursor:pointer;
}
    .Lengthofstay11{
        width:30px;
        height: 70px;
    }
.Lengthofstay{
    width: 100%;
    height: 70px;
    display: flex;
    justify-content:center;
    position: relative;
}
    .Personne1{
       width: 47px;
        height: 25px;
        background: url("../../../assets/largescreen/y12.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }
    .Passengerflowtwo {
        width: 100%;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
.tableDiv{
    width: 100%;
    height: calc(100% - 44px);
    overflow: hidden;
    .td_item{
        width: calc(100% - 10px);
        height: 32px;
        margin: 10px 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 29px;
        box-sizing: border-box;
        background: rgba(2,65,110,0.3);
        .tdi_left{
            display: flex;
            align-items: center;
            .tdil_top{
                width: 47px;
                height: 24px;
                background-repeat: no-repeat;
                background-size: 100% 100%;
                line-height: 24px;
                text-align: center;
                font-size: 12px;
                font-family: YouSheBiaoTiHei;
                color: #FFFFFF;
            }
            .tdil_name{
                margin-left: 16px;
                font-size: 14px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C6D7F1;
            }
        }
        .tdi_right{
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #C6D7F1;
        }
    }
}

    .Statisticalanalysis {
        width: 100%;
        height: 32%;
        position: relative;
    }

    /*.mapdiv img {*/
        /*width: 100%;*/
        /*height: 100%;*/
    /*}*/

.mapdiv{
    height: 55%;
    position: relative;
    background: url('../../../assets/largescreen/y11.png') no-repeat;
    background-size: 100% 100%;
    .mapdiv_town{
        width: 68px;
        height: 41px;
        background: url('../../../assets/largescreen/town_bg.png');
        position: absolute;
        font-size: 16px;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        padding-top: 5px;
        cursor: pointer;
        &.town_active{
            width: 84px;
            height: 78px;
            background: url('../../../assets/largescreen/town_active_bg.png');
            padding-top: 8px;
            margin-left: -8px;
            margin-top: -37px;
        }
    }
}

    .Bottomlandscaping {
        height: 47px;
        width: calc(100% - 60px);
        margin: 0 auto;
        background: url("../../../assets/largescreen/y10.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .mybar {
        flex-grow: 1;
        width: 100%;
    }

    .malepicdiv2 {
        width: 100%;
        height: 30%;
        font-size: 12px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 30px;
        text-align: center;
    }

    .malepicdiv1 {
        width: 70px;
        height: 70%;
        margin: 0 auto;
        position: relative;
    }
.bili{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color: #fff;
    z-index: 99999;
}
.Featureanalysispics{
    width: 100%;
    height: 100%;
}
    .malepicdiv {
        width: 25%;
        height: 100%;
    }

    .malepic {
        flex-grow: 1;
        width: 100%;
        display: flex;
    }

    .male2 {
        width: 100%;
        height: 45px;
        font-size: 20px;
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        color: #C6D7F1;
        line-height: 25px;
        text-align: right;
        padding-right: 40px;
    }

    .male1 {
        width: 100%;
        height: 45px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #C6D7F1;
        line-height: 55px;
        text-align: right;
        padding-right: 60px;
    }

    .Featureanalyimgsis2 {
        width: 48%;
        height: 90px;
        background: url("../../../assets/largescreen/y9.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .Featureanalyimgsis1 {
        width: 48%;
        height: 90px;
        background: url("../../../assets/largescreen/y8.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .Featureanalysis {
        width: 100%;
        height: 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .Piechart {
        width: 100%;
        flex-grow: 1;
        display: flex;
    }
.Piechartpic{
    width: 100%;
    height: 100%;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
}
.Piechartpicimg1{
    width: 100%;
    height: 33px;
    background: url("../../../assets/largescreen/y17.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.keliuone1{
    width: 10px;
    height: 10px;
    background: #036FFE;
}
.keliuone2{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1A8BFF;
    line-height: 33px;
    padding: 0 0px 0 10px;
}
.keliuone3{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1A8BFF;
    line-height: 33px;
    width: 50px;
    text-align: center;
}
.keliuone4{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #1A8BFF;
    line-height: 33px;
   width: 50px;
}
.Piechartpicimg2{
    width: 100%;
    height: 33px;
    background: url("../../../assets/largescreen/y17.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.keliutwo1{
    width: 10px;
    height: 10px;
    background: #1CFFAC;
}
.keliutwo2{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 33px;
    padding: 0 0px 0 10px;
}
.keliutwo3{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 33px;
    width: 50px;
    text-align: center;
}
.keliutwo4{
    height: 33px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #C6D7F1;
    line-height: 33px;
    width: 50px;
}

    .Passengerflow1 img {
        width: 24px;
        height: 24px;
    }

    .Passengerflow1 {
        width: 24px;
        height: 24px;
        margin-right: 15px;
    }

    .Passengerflow3 {
        height: 40px;
        font-size: 18px;
        font-family: DINAlternate, DINAlternate;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40px;
        padding: 0 10px;
    }

    .Passengerflow2 {
        height: 40px;
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 40px;
    }
::v-deep .el-input__inner {
    background-color: transparent;
    color: #e6e6e6;
    border: none;
    width: 100px;
    text-align: center;
}
    .Passengerflow {
        width: 100%;
        height: 40px;
        background: linear-gradient(270deg, rgba(39, 115, 255, 0.4) 0%, rgba(39, 115, 255, 0.25) 23%, rgba(39, 115, 255, 0.06) 100%);
        border-radius: 2px;
        border: 1px solid #294178;
        margin: 20px 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        ::v-deep  .el-radio__label{
            color: #fff;
        }
    }

    .moduledivtop {
        width: 100%;
        height: 44px;
        background: url("../../../assets/largescreen/y6.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: 38px;
        padding-left: 35px;
    }
    .zhuxiantu{
        width: 100%;
        height: 100%;

    }
.moduledivtopkll {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99999;
    width: 420px;
    height: 44px;
    background: url("../../../assets/largescreen/y6.png");
    /*background-size: 100% 100%;*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-size: 24px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    line-height: 38px;
    padding-left: 35px;
}
    .modulediv {
        width: 100%;
        height: 32%;
        display: flex;
        flex-direction: column;
    }
    .Intermediatemodule {
        width: 49%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .Leftsidemodule, .Rightmodule {
        width: 24%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .Touristbottomportrait {
        width:calc(100% - 60px);
        height:calc(100% - 136px);
        margin: 0 auto;
        flex-grow: 1;
        display: flex;
        justify-content: space-between;
    }

    .Bottomlandscaping {
        height: 47px;
        width: calc(100% - 60px);
        margin: 0 auto;
        background: url("../../../assets/largescreen/y10.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

    .selectdada {
        color: #FFFFFF !important;
    }

    .Navigationimgright {
        width: 183px;
        height: 50px;
        line-height: 50px;
        background: url("../../../assets/largescreen/y5.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        align-items: center;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #79A5CB;
        text-align: center;
        cursor: pointer;
    }

    .Navigationimg {
        cursor: pointer;
        width: 183px;
        height: 50px;
        line-height: 50px;
        background: url("../../../assets/largescreen/y4.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        align-items: center;
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #79A5CB;
        text-align: center;
    }

    .Navigationright {
        width: calc(50% - 310px);
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .Navigationleft {
        width: calc(50% - 310px);
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .Navigationmiddle {
        width: 360px;
        height: 89px;
        font-size: 40px;
        font-family: YouSheBiaoTiHei;
        color: #FFFFFF;
        line-height: 60px;
        background: linear-gradient(180deg, #FFFFFF 0%, #90DEFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
        font-weight: bold;
    }

    .Navigation {
        flex-grow: 1;
        height: 89px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mydate {
        width: 220px;
        height: 22px;
        font-size: 16px;
        font-family: Helvetica;
        color: #C6D7F1;
        line-height: 22px;
        padding-right: 30px;
        text-align: right;
    }

    .weathertext {
        width: 110px;
        height: 22px;
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #C6D7F1;
        line-height: 22px;
    }

    .weatherimg img {
        width: 24px;
        height: 22px;
    }

    .weatherimg {
        width: 24px;
        height: 22px;
        margin-left: 10px;
        margin-right: 5px;
    }

.mydate {
    width: 260px;
    height: 22px;
    font-size: 16px;
    font-family: Helvetica;
    color: #C6D7F1;
    line-height: 22px;
    padding-right: 30px;
    text-align: right;
}
.fanhuimain {
    width: 102px;
    height: 38px;
    margin-left: 30px;
}
.fanhuimain img{
    width: 102px;
    height: 38px;
}
.weather {
    width: 260px;
    height: 22px;
    display: flex;
    align-items: center;
}

    .Touristportrait {
        width: 100%;
        height: 89px;
        background: url("../../../assets/largescreen/y2.png");
        /*background-size: 100% 100%;*/
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
.maindivwc{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 9999;
}
    .maindiv {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        z-index: 9999;
        /*zoom:1;*/
        background: url("../../../assets/largescreen/y1.png");
        /*background: #F1F4F5;*/
        width: 100%;
        height: 100%;
        background-size: 100% 100%;

        display: flex;
        flex-direction: column;
    }
</style>
